<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- <span>{{pet.name}}</span> -->
        <el-select v-model="value" placeholder="请选择" @change="initData()">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button style="float: right; padding: 3px 0" type="text">{{pet.series}}</el-button>
      </div>
      <div v-for="(item,index) in pet.skill" :key="index" class="text item">{{index}}.{{item}}</div>
    </el-card>
    <h4>留言板</h4>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="留言人">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
       
      <el-form-item label="留言内容">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">创建留言</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// 1.npm 安装，2.import axios，3.使用
import axios from "axios";

export default {
  data() {
    return {
      pet: {},
      options: [
        {
          value: "pikachu",
          label: "皮卡丘"
        },
        {
          value: "penhuolong",
          label: "喷火龙"
        },
        {
          value: "miaowahua",
          label: "妙蛙花"
        }
      ],
      value: "pikachu",
      form: {
          name: '',
          desc: ''
        }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      console.log(this);
      // 转义符
      var that = this;
      axios
        .get("https://www.aulence.com/php/role-info.php", {
          params: {
            role: this.value
          }
        })
        .then(function(res) {
          console.log(this);
          // 结构赋值
          var { data } = res;
          // var data = res.data;
          // console.log(data);
          that.pet = data;
          // console.log(that.pet)
          console.log(that.pet);
        })
        .catch();
    },
    
    onSubmit() {
      axios.post('http://api.aulence.com/message-board/mesg-add.php',{
        spokesperson:this.form.name,
        messageContent:this.form.desc
      }).then(function(res){
        console.log(res)
      })
    }
  }
};
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

/* .box-card {
  width: 480px;
} */
h4{
  margin-top:40px;
  text-align: center;
}
</style>